<template>
	<view class="vip">
		<view class="head">
			<image class="bg1" src="@/static/image/bg1.png"></image>
			<view class="title">· 高级会员 ·</view>
			<view class="services">
				<div class="servicesName">尊享六大权益</div>
				<view class="flagList">
					<view class="flag" v-for="(item,index) in list" :key="index">
						<image class="image" :src="item.icon"></image>
						<text class="text">{{item.txt}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="list">
			<view class="li" :class="{active:card.id===active}" v-for="(card,index) in cards" :key="index"
				@click="change(card)">
				<text class="type">{{card.vipTitle}}</text>
				<view class="desc">
					<text class="unit color">￥</text>
					<text class="num1 color">{{card.price.split('.')[0]}}.</text>
					<text class="num2 color" style=""> {{card.price.split('.')[1]}}</text>
					<text class="num2"> /{{card.unit}}</text>
				</view>
				<view class="del">{{card.del}}</view>
				<view class="box" v-if="card.id===active">
					<text class="iconfont icon-duihao"></text>
				</view>
			</view>
		</view>
		<view class="btn" @click="click()">充 值</view>
	</view>
</template>
<script>
	import message from '@/static/image/message.png'
	import desktop from '@/static/image/desktop.png'
	import earth from '@/static/image/earth.png'
	import sliders from '@/static/image/sliders.png'
	import thunderbolt from '@/static/image/thunderbolt.png'
	import cloudSync from '@/static/image/cloud-sync.png'
	export default {
		data() {
			return {
				active: '1',
				list: [{
						icon: message,
						txt: '不限对话次数'
					},
					{
						icon: desktop,
						txt: '网页版访问特权'
					},
					{
						icon: earth,
						txt: '专线网络优化'
					},
					{
						icon: sliders,
						txt: '稳定不掉线'
					},
					{
						icon: thunderbolt,
						txt: '快速回答'
					},
					{
						icon: cloudSync,
						txt: '多端同步'
					}
				],
				cards: [{
						txt: '月卡',
						type: '1',
						price: '19.99',
						unit: '月',
						del: '￥30/月'
					},
					{
						txt: '季卡',
						type: '2',
						price: '49.99',
						unit: '季',
						del: '￥80/季'
					},
					{
						txt: '年卡',
						type: '3',
						price: '99.99',
						unit: '年',
						del: '￥120/年'
					}
				],
				row:{}
			}
		},
		onLoad() {
			this.init()
		},
		methods: {
			click(){
				if(!uni.getStorageSync('openid')){
					uni.reLaunch({
						url:'/pages/login/index'
					})
					return
				}
				this.$post('api/createWxPay',{
					id:this.row.id,
					memo:'',
					openid:uni.getStorageSync('openid'),
					type:'VIP'
				},{
					'Content-Type':'application/json'
				}).then(res=>{
					uni.requestPayment({
						provider: 'wxpay',
						timeStamp: res.data.timeStamp,
						nonceStr: res.data.nonceStr,
						package: res.data.packageStr,
						signType: res.data.signType,
						paySign: res.data.paySign,
						success: function(res) {
							uni.navigateTo({
								url:'/pages/mine/index'
							})
						},
						fail: function(err) {
							console.log('fail:' + JSON.stringify(err));
						}
					});
				})
			},
			change(row) {
				this.active = row.id
				this.row = row
				console.log(row,'row');
			},
			init() {
				this.$post('api/vipConfig').then(res => {
					console.log(res, 'api/vipConfig');
					this.cards = res.data.map(item => {
						return {
							vipTitle: item.vipTitle,
							id: item.id,
							price: (item.amount / 100).toFixed(1),
							unit: item.vipType,
							del: `￥${(item.originalPrice / 100).toFixed(2)}/${item.vipType}`
						}
					})
				})
			}
		}
	}
</script>
<style scoped lang="scss">
	.vip {
		.head {
			padding: 32rpx 0 0;

			.bg1 {
				width: 100vw;
				height: 404rpx;
				position: absolute;
				left: 0;
				top: 0;
				z-index: -1;
			}

			.title {
				font-size: 32rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 600;
				color: #FFFFFF;
				line-height: 44rpx;
				position: relative;
				text-align: center;

				&::after {
					width: 40rpx;
					height: 4rpx;
					content: '';
					position: absolute;
					left: 50%;
					top: 50%;
					transform: translate(100rpx, 0%);
					background-color: #fff;
				}

				&::before {
					width: 40rpx;
					height: 4rpx;
					content: '';
					position: absolute;
					left: 50%;
					top: 50%;
					transform: translate(-140rpx, 0%);
					background-color: #fff;
				}
			}

			.services {
				width: 686rpx;
				height: 360rpx;
				background: #FFFFFF;
				box-shadow: 0px 4rpx 16rpx 0px rgba(42, 135, 255, 0.08);
				border-radius: 20rpx;
				margin: 32rpx auto;
				padding: 32rpx;
				box-sizing: border-box;

				.servicesName {
					width: 192rpx;
					height: 44rpx;
					font-size: 32rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 600;
					color: #333;
					line-height: 44rpx;
					margin-bottom: 20rpx;
				}

				.flagList {
					width: 622rpx;
					height: 232rpx;
					background: #F7FAFF;
					border-radius: 20rpx;
					display: flex;
					flex-wrap: wrap;
					padding: 36rpx 32rpx;
					box-sizing: border-box;

					.flag {
						width: 50%;
						display: flex;
						align-items: center;

						.image {
							width: 32rpx;
							height: 32rpx;
							margin-right: 16rpx;
							vertical-align: middle;
						}

						.text {
							font-size: 28rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #666666;
							line-height: 40rpx;
						}
					}
				}
			}
		}

		.list {
			width: 100vw;
			display: flex;
			align-items: center;
			justify-content: space-around;

			.active {
				background: #F7FAFF;
				border-radius: 20rpx;
				border: 1px solid #2A87FF !important;
				box-sizing: border-box;
			}

			.li {
				width: 208rpx;
				height: 214rpx;
				padding: 10rpx 16rpx;
				box-sizing: border-box;
				border: 1px solid transparent;
				position: relative;
				overflow: hidden;

				.type {
					font-size: 24rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 600;
					color: #333333;
					line-height: 34px;
					margin-bottom: 8rpx;
					padding-left: 6rpx;
				}

				.desc {
					.unit {
						font-weight: 600;
					}

					.num1 {
						font-size: 46rpx;
					}

					.num2 {
						color: #666666;
						font-size: 20rpx;
					}

					.color {
						color: #F66324;
					}
				}

				.del {
					display: inline-block;
					font-size: 20rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;
					line-height: 34rpx;
					padding-left: 8rpx;
					position: relative;

					&::before {
						width: 100%;
						height: 2rpx;
						content: '';
						background-color: #999;
						position: absolute;
						left: 50%;
						top: 50%;
						transform: translate(-50%, -50%);
					}
				}

				.box {
					width: 100rpx;
					height: 100rpx;
					position: absolute;
					right: -50rpx;
					bottom: -50rpx;
					background-color: #2A87FF;
					border-radius: 60rpx 30rpx;

					.icon-duihao {
						display: inline-block;
						z-index: 4;
						color: #fff;
						margin: 15rpx;
					}
				}
			}
		}

		.btn {
			width: 686rpx;
			height: 88rpx;
			background: linear-gradient(222deg, #2CE6FF 0%, #2A87FF 100%);
			box-shadow: 0px 4rpx 16rpx 0px rgba(42, 135, 255, 0.1);
			border-radius: 44rpx;
			line-height: 88rpx;
			text-align: center;
			color: #fff;
			margin: 48rpx auto;
		}
	}
</style>
